import React from 'react'
import { Modal, Button, Form, Input, Row, Col } from 'antd'
import LwjTable from 'components/LwjTable/LwjTable'

const FormItem = Form.Item
const Step = ({prev, dataSource, dispatch, roleIds, currentItem, bindUserItem}) => {
  // 处理dataSource
  if (Array.isArray(dataSource)) {
    dataSource = dataSource.filter(item => item.name === 'ROLE_STORE_SALESMAN' || item.name === 'ROLE_STORE_EMPLOYEE' || item.name === 'ROLE_STORE_ADMIN')
  }
  const columns = [
    {
      title: '角色编码',
      dataIndex: 'name',
      key: 'name',
      width: 150
    }, {
      title: '角色名称',
      dataIndex: 'description',
      key: 'description',
      width: 150
    },
  ]

  const bind = () => {
    /** @namespace currentItem.organizationId */
    dispatch({
      type: 'bindUser/onBindRoles',
      payload: {
        userId: bindUserItem.id,
        roleIds: roleIds,
        orgId: currentItem.organizationId
      }
    })
  }

  const listProps = {
    dataSource,
    pagination: false,
    pageChangeAction: 'role/query',
    dispatch,
    selectType: 'multiple',
    selectedRowKeys: roleIds,
    onSelectRows: (selectedRowKeys) => {
      dispatch({
        type: 'bindUser/bindRoleIds',
        payload: {
          roleIds: selectedRowKeys
        }
      })
    }
  }

  return (
    <div>
      <LwjTable
        {...listProps}
        columns={columns}/>
      <Row type="flex" justify="space-around" gutter={8}>
        <FormItem>

        </FormItem>
      </Row>
      <Row type="flex" justify="space-around" gutter={8}>
        {<Col>
          <Button onClick={prev}>上一步</Button>
        </Col>}
        {roleIds.length > 0 && <Button onClick={bind}>绑定</Button>}
      </Row>
    </div>
  )
}

export default Step
